<template>
  <div class="index" @scroll="scrollIndex" ref="index">
    <div class="navigation" ref="navigation">
      <div class="logo"></div>
      <div class="nav">
        <div
          class="nav-item"
          @mouseover="NavSelect(index)"
          @mouseout="NavunSelect(index)"
          :key="index"
          v-for="(item, index) in navList"
        >
          {{ item.title }}
          <div class="zhan"></div>
          <div ref="navSelect" class="nav-select">
            <div
              class="nav-select-item"
              :key="index"
              v-for="(item2, index) in item.options"
            >
              {{ item2.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <router-view />
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const navSelect = ref(null);
const navList = ref([
  {
    title: "首页",
  },
  {
    title: "产品中心",
    options: [
      {
        title: "产品中心",
        url: "",
      },
      {
        title: "产品中心",
        url: "",
      },
      {
        title: "产品中心",
        url: "",
      },
      {
        title: "产品中心",
        url: "",
      },
      {
        title: "产品中心",
        url: "",
      },
      {
        title: "产品中心",
        url: "",
      },
      {
        title: "产品中心",
        url: "",
      },
      {
        title: "产品中心",
        url: "",
      },
    ],
  },
  {
    title: "销售服务",
  },
  {
    title: "关于我们",
  },
]);
const index = ref();
const navigation = ref();

function scrollIndex() {
  if (index.value.scrollTop < 10) {
    navigation.value.style.backgroundColor = "transparent";
  }else{
    navigation.value.style.backgroundColor = "#fff";
  }
}
onMounted(() => {
  scrollIndex();
});
function NavSelect(index) {
  if (!navList.value[index].options > 0) {
    return;
  }
  navSelect.value[index].style.maxHeight = "20vw";
}
function NavunSelect(index) {
  navSelect.value[index].style.maxHeight = "0vw";
}
</script>
<style scoped lang="less">
.index {
  width: calc(100vw - 15px);
  height: 100vh;
  // overflow-x: hidden;
  overflow-y: scroll;
  background-color: #ffffff;
  .navigation {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 5.168vw;
    padding: 0 18.605vw;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    .logo {
      width: 14.212vw;
      height: 3.411vw;
      background-image: url(https://www.ieit.top/picture/logo.png);
      background-size: 100% 100%;
    }
    .nav {
      display: flex;
      font-weight: 700;
      font-size: 1.034vw;
      color: #333;
      margin-left: 5.168vw;
      height: 5.168vw;
      align-items: center;
      .nav-item {
        box-sizing: border-box;
        position: relative;
        height: 3.101vw;
        cursor: pointer;
        line-height: 3.101vw;
      }
      .nav-item:hover {
        color: #4986ff;
        border-bottom: #4986ff 0.103vw solid;
      }
      .nav-item + .nav-item {
        margin-left: 2.584vw;
      }
      .zhan {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 4.961vw;
      }
      .nav-select {
        position: absolute;
        top: 3.5vw;
        left: -2.067vw;
        width: 10.336vw;
        max-height: 0;
        transition: all 0.5s;
        overflow: hidden;
        background-color: rgb(255, 255, 255);
        .nav-select-item:nth-child(1) {
          margin-top: 1vw;
        }
        .nav-select-item {
          width: 100%;
          color: #74788d;
          line-height: 1.86vw;
          height: 1.86vw;
          font-size: 0.724vw;
          padding-left: 1.55vw;
          border-radius: 0.207vw;
          padding-bottom: 1vw;
        }
        .nav-select-item:hover {
          color: #4986ff;
        }
      }
    }
  }
}
.index::-webkit-scrollbar {
  display: none; /* 注意：这个属性在某些旧版浏览器中可能不被支持 */
}
</style>
